<template>
  <uni-popup ref="popup" type="bottom">
    <view class="picker-content">
      <view class="picker-header">
        <text class="cancel-btn" @click="cancelSelect">取消</text>
        <text class="picker-title">选择省市区</text>
        <text class="confirm-btn" @click="confirmSelect">确定</text>
      </view>
      <picker-view 
        class="picker-view"
        :indicator-style="indicatorStyle"
        :value="currentIndexes"
        @change="onChange"
      >
        <picker-view-column>
          <view class="picker-item" v-for="(province, index) in provinces" :key="index">
            {{ province.label }}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view class="picker-item" v-for="(city, index) in cities" :key="index">
            {{ city.label }}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view class="picker-item" v-for="(area, index) in areas" :key="index">
            {{ area.label }}
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, computed } from 'vue'
import { addr } from '@/utils/addr'

const props = defineProps({
  initialRegion: {
    type: Object,
    default: () => ({
          text: '',
          code: ''
    })
  }
})

const emit = defineEmits(['confirm', 'cancel'])

const popup = ref(null)
const currentIndexes = ref([0, 0, 0])
const indicatorStyle = 'height: 88rpx;'

// 省级数据
const provinces = computed(() => addr)

// 市级数据
const cities = computed(() => {
  const province = provinces.value[currentIndexes.value[0]]
  return province?.children || []
})

// 区级数据
const areas = computed(() => {
  const province = provinces.value[currentIndexes.value[0]]
  const city = province?.children?.[currentIndexes.value[1]]
  return city?.children || []
})

// 打开选择器
const open = () => {
  if (props.initialRegion) {
    const [provinceName, cityName, areaName] = props.initialRegion.text.split(' ')
    const provinceIndex = provinces.value.findIndex(p => p.label === provinceName)
    if (provinceIndex !== -1) {
      currentIndexes.value[0] = provinceIndex
      const cityIndex = cities.value.findIndex(c => c.label === cityName)
      if (cityIndex !== -1) {
        currentIndexes.value[1] = cityIndex
        const areaIndex = areas.value.findIndex(a => a.label === areaName)
        if (areaIndex !== -1) {
          currentIndexes.value[2] = areaIndex
        }
      }
    }
  }
  popup.value?.open()
}

// 选择器change事件
const onChange = (e) => {
  const indexes = e.detail.value
  
  // 如果省份改变，重置市和区的索引
  if(indexes[0] !== currentIndexes.value[0]) {
    indexes[1] = 0
    indexes[2] = 0
  }
  // 如果城市改变，重置区的索引
  else if(indexes[1] !== currentIndexes.value[1]) {
    indexes[2] = 0
  }
  
  currentIndexes.value = indexes
}

// 确认选择
const confirmSelect = () => {
  const province = provinces.value[currentIndexes.value[0]]
  const city = cities.value[currentIndexes.value[1]]
  const area = areas.value[currentIndexes.value[2]]
  if (province && city && area) {
    emit('confirm', {
      text: `${province.label} ${city.label} ${area.label}`,
      code: area.code
    })
  }
  popup.value?.close()
}

// 取消选择
const cancelSelect = () => {
  emit('cancel')
  popup.value?.close()
}

defineExpose({
  open
})
</script>

<style scoped>
.picker-content {
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 0 0;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  border-bottom: 2rpx solid #001E32;
}

.cancel-btn {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #001E32;
  letter-spacing: 0;
  font-weight: 500;
}

.picker-title {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.confirm-btn {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #3678BF;
  letter-spacing: 0;
  font-weight: 500;
}

.picker-view {
  width: 100%;
  height: 480rpx;
}

.picker-item {
  line-height: 88rpx;
  text-align: center;
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #001E32;
  letter-spacing: 0;
  font-weight: 500;
}
</style> 